<template>
	<div class="div-user-sum">
		<div class="div-top">
			<span>实验报告模板管理</span>
		</div>
		<span class="search_label">实验模板名称:</span>
		<el-input placeholder="请输入实验模板名称" v-model="name" style="width:200px;margin-left: 10px" clearable/>
		<span class="search_label">所属专业:</span>
		<el-select v-model="majorId" placeholder="请选择所属专业" style="width:200px;margin-left: 10px" clearable>
			<el-option v-for="item in majors" :label="item.name" :value="item.id">
			</el-option>
		</el-select>
		<el-button type="primary" style="margin:0 0 10px 10px" @click="currentChange(1)">搜索</el-button>
		<el-button type="primary" style="margin:0 0 10px 10px" @click="openAdd">添加实验模板</el-button>
		<div style="margin: 10px;">
			<el-table :data="tableDate" border>
				<el-table-column prop="name" label="实验模板名称" align='center' show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="majorName" label="所属专业" align='center'>
				</el-table-column>
				<el-table-column label="操作" align="center" width='350'>
					<template slot-scope="scope">
						<el-button type="primary" @click="openEdit(scope.row)" size="small">编辑</el-button>
						<el-button type="danger" @click="openDelete(scope.row)" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="margin: 10px; text-align: center;">
				<el-pagination background @current-change="currentChange" :current-page="pageNum" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</div>
		<el-dialog title="添加实验模板" :show-close="false" :close-on-press-escape='false' :close-on-click-modal='false' :append-to-body='true' :visible.sync="addDialog" width="800px">
			<el-form :model="addForm" :rules="rules" ref="addForm" label-width="110px" style='width: calc(100% - 40px);'>
				<el-form-item label="实验模板名称" prop="name">
					<el-input placeholder="请输入实验模板名称" v-model="addForm.name" maxlength='255' clearable></el-input>
				</el-form-item>
				<el-form-item label="专业分类" prop="majorId">
					<el-select v-model="addForm.majorId" placeholder="请选择所属专业" style="width:100%;">
						<el-option v-for="item in majors" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="模板内容" prop="content">
					<editor-more :content='addForm.content' @change="addContentChange"></editor-more>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="resetAdd" :disabled='dataloading '>取 消</el-button>
				<el-button type="primary" @click="addData" :disabled='dataloading '>确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog title="修改实验模板" :show-close="false" :close-on-press-escape='false' :close-on-click-modal='false' :append-to-body='true' :visible.sync="editDialog" width="800px">
			<el-form :model="editForm" :rules="rules" ref="editForm" label-width="110px" style='width: calc(100% - 40px);'>
				<el-form-item label="实验模板名称" prop="name">
					<el-input placeholder="请输入实验模板名称" v-model="editForm.name" maxlength='255' clearable></el-input>
				</el-form-item>
				<el-form-item label="专业分类" prop="majorId">
					<el-select v-model="editForm.majorId" placeholder="请选择所属专业" style="width:100%;">
						<el-option v-for="item in majors" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="模板内容" prop="content">
					<editor-more :content='editForm.content' @change="editContentChange"></editor-more>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="resetEdit" :disabled='dataloading '>取 消</el-button>
				<el-button type="primary" @click="editData" :disabled='dataloading '>确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import EditorMore from "@/components/Editor/index.vue";
	import { putProgress, createMultipartUpload, listObjects } from "@/utils/oss.js";
	import { majorList } from '@/api/major.js'
	import { vrReportTemplateList, saveVrReportTemplate, updateVrReportTemplate, removeVrReportTemplate, selectVrReportTemplateDetail } from "@/api/vrReportTemplate.js"
	export default {
		components: {
			EditorMore
		},
		data() {
			return {
				tableDate: [],
				name: "",
				majorId: "",
				pageNum: 1,
				pageSize: 10,
				total: 0,
				majors: [],
				dataloading: false,
				addDialog: false,
				editDialog: false,
				addForm: {
					name: '',
					majorId: '',
					content: '',
					majorType: '',
				},
				editForm: {
					vrReportTemplateId: '',
					name: '',
					majorId: '',
					content: '',
					majorType: '',
				},
				rules: {
					name: [{
						required: true,
						message: '请输入模板名称',
						trigger: 'blur'
					}],
					majorId: [{
						required: true,
						message: '请选择专业',
						trigger: 'blur'
					}],
					content: [{
						required: true,
						message: '请输入模板内容',
						trigger: 'blur'
					}],
				},

			}
		},
		created() {
			this.getMajorList();
			this.getDateList();
		},
		methods: {
			openAdd() {
				this.addDialog = true;
				this.objects = [];
			},
			addContentChange(data) {
				this.addForm.content = data.html;
			},
			addData() {
				this.dataloading = true;
				setTimeout(_ => {
					this.dataloading = false;
				}, 1000)
				this.$refs.addForm.validate((valid) => {
					if(valid) {
						var data = Object.assign({}, this.addForm);
						saveVrReportTemplate(data).then(async res => {
							if(res.code == '200') {
								this.$message({
									message: '添加成功',
									type: 'success'
								});
								this.getDateList();
								this.resetAdd();
							} else {
								this.$message({
									message: res.message,
									type: 'error'
								});
							}
						});
					}
				})
			},
			resetAdd() {
				this.addDialog = false;
				this.addForm.majorType = [];
				this.$refs.addForm.resetFields();
				this.$refs.addForm.clearValidate();
			},
			openEdit(item) {
				selectVrReportTemplateDetail({
					vrReportTemplateId: item.vrReportTemplateId
				}).then(res => {
					this.editDialog = true;
					this.editForm = Object.assign({}, item, res.data);
				})
			},
			editContentChange(data) {
				this.editForm.content = data.html;
			},
			editData() {
				this.$refs.editForm.validate((valid) => {
					if(valid) {
						var data = Object.assign({}, this.editForm);
						updateVrReportTemplate(data).then(async res => {
							if(res.code == '200') {
								this.$message({
									message: '编辑成功',
									type: 'success'
								})
								this.getDateList();
								this.resetEdit();
							} else {
								this.$message({
									message: res.message,
									type: 'error'
								})
							}
						})
					}
				})
			},
			resetEdit() {
				this.editDialog = false;
				this.editForm.majorType = [];
				this.$refs.editForm.resetFields();
				this.$refs.editForm.clearValidate()
			},
			openDelete(item) {
				this.$confirm('是否删除该实验模板?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					removeVrReportTemplate({
						vrReportTemplateId: item.vrReportTemplateId
					}).then(async res => {
						if(res.code == '200') {
							this.$message({
								message: '删除成功',
								type: 'success'
							})
							this.getDateList();
						} else {
							this.$message({
								message: res.message,
								type: 'error'
							})
						}
					})
				}).catch(() => {});
			},
			getMajorList() {
				majorList({}).then(res => {
					this.majors = res.data || []
				})
			},
			currentChange(pageNum) {
				this.pageNum = pageNum;
				this.getDateList()
			},
			getDateList() {
				var data = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					name: this.name ? this.name : null,
					majorId: this.majorId,
				}
				vrReportTemplateList(data).then(async res => {
					this.tableDate = res.data.list;
					this.total = res.data.total;
				});
			},
		}
	}
</script>